<template>
    {{form}}
    <h2 style="text-align: center;">添加管理员页面</h2>
    <table class="table">
        <tbody>
            <tr class="form-inline">
                <td><span style="color: red;">*</span>创建时间</td>
                <td>
                    <input type="date" v-model="form.createtime" class="form-inline" >
                </td>
            </tr>
            <tr class="form-inline">
                <td><span style="color: red;">*</span>图片</td>
                <td>
                    <img :src="form.mimg" style="width: 100px;height: 100px;">
                    <input type="file" @change="img2" >
                </td>
            </tr>
            <tr class="form-inline">
                <td><span style="color: red;">*</span>账号</td>
                <td>
                    <input type="text" v-model="form.zhanghao" class="form-inline" >
                </td>
            </tr>
            <tr class="form-inline">
                <td><span style="color: red;">*</span>密码</td>
                <td>
                    <input type="password" v-model="form.password" class="form-inline" >
                </td>
            </tr>
            <tr class="form-inline">
                <td><span style="color: red;">*</span>姓名</td>
                <td>
                    <input type="text" v-model="form.name" class="form-inline" >
                </td>
            </tr>
            <tr class="form-inline">
                <td><span style="color: red;">*</span>联系方式</td>
                <td>
                    <input type="text" v-model="form.phone" class="form-inline" >
                </td>
            </tr>
            <tr class="form-inline">
                <td><span style="color: red;">*</span>角色</td>
                <td>
                    <select v-model="form.player" class="form-inline" >
                        <option :value="0">--请选择--</option>
                        <option value="老师">老师</option>
                        <option value="主任">主任</option>
                        <option value="校长">校长</option>
                        <option value="学生">学生</option>
                    </select>
                </td>
            </tr>
            <tr class="form-inline">
                <td colspan="2" style="text-align: center;">
                    <button class="btn btn-primary" @click="add">添加</button>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import "bootstrap/dist/css/bootstrap.min.css"
import router from '@/router';

const form = reactive({
    "createtime": "",
  "mimg": "",
  "zhanghao": "",
  "password": "",
  "name": "",
  "phone": "",
  "del": true,
  "player": "0"
})

const img2 = (e:any) => {
    let file = e.target.files[0];
    const data = new FormData();
    data.append("file", file);
    axios.post("https://localhost:7230/api/Message/upload",data).then(res => {
        form.mimg = res.data;
    })
}

const add = () => {
    if (!form.createtime) {
        alert("时间不能为空");
        return;
    }
    if (!form.mimg) {
        alert("图片不能为空");
        return;
    }
    if (!form.zhanghao) {
        alert("账号不能为空");
        return;
    }
    if (form.zhanghao!="wulei") {
        alert("账号必须是小写英文字母4-16位");
        return;
    }
    if (!form.password) {
        alert("密码不能为空");
        return;
    }
    if (!form.name) {
        alert("姓名不能为空");
        return;
    }
    if (form.name!="武磊") {
        alert("管理员姓名需2-20之间的汉字");
        return;
    }
    if (!form.phone) {
        alert("联系方式不能为空");
        return;
    }
    if (form.phone!="13312312311") {
        alert("手机号需要合法的手机号码");
        return;
    }
    if (!form.player) {
        alert("角色不能为空");
        return;
    }
    axios.post("https://localhost:7230/api/Message/Add", form).then(res => {
        if (res.data > 0) {
            alert("添加成功");
            router.push("/fenyeshow")
        }
        else {
            alert("添加失败");
            return;
        }
    })
}




</script>